<template>
  <layout>
    <uv-sticky bg-color="#F5F5F5" offset-top="0" customNavHeight="0">
      <uv-navbar :fixed="false" :safeAreaInsetTop="true" height="0" bgColor="transparent" leftIcon=""/>
      <!-- #ifndef MP -->
      <blank size="10"></blank>
      <!-- #endif -->

      <blank size="5"></blank>
    </uv-sticky>

    <blank size="10"></blank>
    <view class="container">
      <view class="banner">
        <uv-swiper class="bg" height="300" imgMode="aspectFill" keyName="image" :list="listAds"
                   :display-multiple-items="0" indicatorMode="dot" indicatorStyle="bottom"></uv-swiper>
      </view>
      <view class="content">
        <view class="entrance">
          <view class="item" @tap="takein">
            <view>
              <view class="font-md">今天吃什么呢</view>
              <view class="font-small text-light-black flex-1">选择想吃的食物吧~</view>
            </view>
            <view class="index-img">
              <image src="/static/images/index002.png" mode="aspectFit" class="img-01"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </layout>
</template>

<script setup>
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import {menuAds} from '@/api/market'
import {storeToRefs} from 'pinia'
import {useMainStore} from '@/store/store'

const main = useMainStore()
const {store} = storeToRefs(main)
const listAds = ref([])

const handGetListAds = async () => {
  let shop_id = store.id ? store.id : 0;
  let data = await menuAds({
    list_option: {
      options: [{
        key: 1,
        value: shop_id.toString()
      }],
      skip_total: true,
    },
  });

  if (data) {
    listAds.value = data.list;
    uni.setStorage({
      key: 'isActive',
      data: data.isActive
    });
    if (listAds.value.length > 0) {
      uni.setStorage({
        key: 'shopAd',
        data: listAds.value[0]
      });
    }
  }
}

const takein = () => {
  main.SET_ORDER_TYPE('takein')
  uni.switchTab({
    url: '/pages/menu/menu'
  })
}

onLoad(() => {
  handGetListAds()
})
</script>

<style lang="scss">
.index-img {
  width: 120px;
  height: 120rpx;
  position: relative;
}

.img-01 {
  width: 100px;
  height: 100rpx;
}

/* #ifdef H5 */
page {
  height: auto;
  min-height: 100%;
}

/* #endif */
page {
  background-color: #ffffff !important;
}

.banner {
  position: relative;
  width: 100%;

  .bg {
    width: 100%;
    height: 300rpx;
  }

  .intro {
    position: absolute;
    top: calc(50rpx + var(--status-bar-height));
    left: 40rpx;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;

    .greet {
      font-size: $font-size-lg;
      margin-bottom: 10rpx;
    }

    .note {
      font-size: $font-size-sm;
    }
  }
}

.content {
  padding: 0 50rpx;
}

.entrance {
  position: relative;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  border-radius: 10rpx;
  background-color: #ffffff;
  box-shadow: $box-shadow;
  padding: 30rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50rpx;

  .item {
    display: flex;
    justify-content: center;
    position: relative;

    .icon {
      font-size: 90rpx;
      color: #dd524d;
    }

    .title {
      font-size: 30rpx;
      color: $text-color-base;
      font-weight: 600;
    }
  }
}
</style>
